<html>
	<head>
		<title>Find User</title>
		<link rel="stylesheet" href="../css/style.css" media="screen">
		<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" media="screen">
		<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojox/grid/resources/claroGrid.css" />
	</head>
	<body class="claro">
		<script>dojoConfig = {parseOnLoad: true}</script>
		<script src="/getJS?item=createMenu"></script>
		<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script>
		<script>
			require(["dojo/ready", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/Button",
				"dijit/form/TextBox", "dojo/keys", "dojo/request", "dijit/focus", "dojo/dom", "dojox/grid/DataGrid", "dojo/store/Memory",
				"dojo/data/ObjectStore", "dijit/MenuBar", "dijit/PopupMenuBarItem", "dijit/Menu", "dijit/MenuItem", "dijit/DropDownMenu", "dijit/MenuBarItem"], 
				function(ready, BorderContainer, ContentPane, Button, TextBox, keys, request, focusUtil, dom,
					DataGrid, Memory, ObjectStore){
					ready(function() {
						var bc = new BorderContainer({style: "height: 100%; width: 100%;", gutters:false});
						var top = new ContentPane({
							region: "top",
							style: "height: 15%",
							content: ""});
						var center = new ContentPane({
							region: "center",
							content: ""});
						var topTop = new ContentPane({
							region: "top",
							content: ""});
						var topBottom = new ContentPane({
							region: "bottom",
							content: ""});
						var bcTop = new BorderContainer({gutters: false, style: "height: 15%"});
						bc.addChild(top);
						bc.addChild(center);
						var username = new TextBox({
							id: "username",
							style: "",
							placeholder: "Username",
							value: "",
							onKeyPress: function(e){
								if (e.keyCode == keys.TAB){
									focusUtil.focus(dom.byId("name"));
								}
								else if (e.keyCode == keys.ENTER){
								
								}
								else {
								
								}
							}});
						var name = new TextBox({
							id: "name",
							style: "",
							placeholder: "Name",
							value: "",
							onKeyPress: function(e){
								if (e.keyCode == keys.TAB){
									focusUtil.focus(dom.byId("email"));
								}
								else if (e.keyCode == keys.ENTER){
								
								}
								else {
								
								}
							}});
						var email = new TextBox({
							id: "email",
							style: "",
							placeholder: "Email",
							value: "",
							onKeyPress: function(e){
								if (e.keyCode == keys.TAB){
									focusUtil.focus(dom.byId("name"));
								}
								else if (e.keyCode == keys.ENTER){
								
								}
								else {
								
								}
							}});
							
						var search = new Button({
							id: "search",
							label: "Search",
							onClick: function() {
							
							}});
							
						dataGrid = grid();
							
						function grid(){

							grid = new DataGrid({
								style: "height: 100%; width: 100%",
								structure: [
								{
										noscroll: true,
										defaultCell: { width: "32%" },
										cells: [
											{ name: "Username", field: "username" },
											{ name: "Full Name", field: "name" },
											{ name: "Email Address", field: "email"}
										]
									},{
									}
								]
							}, "grid");
							return grid;
						}
						
						document.body.appendChild(bc.domNode);
						top.set("content", bcTop.domNode);
						topTop.set("content", createMenu(request, JSON).domNode);
						topBottom.set("content", [
							username.domNode,
							name.domNode,
							email.domNode,
							search.domNode,
							]);
						bcTop.addChild(topTop);
						bcTop.addChild(topBottom);
						center.set("content", dataGrid.domNode);
						bc.startup();
						
					})
				});
		</script>
	</body>
</html>